<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <AppHeader :site-name="siteName" :nav-items="navItems" @command="handleCommand" />

    <!-- 主内容区域 -->
    <main class="app-main">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>


  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/store/user/index.js'
import AppHeader from '@/components/layout/AppHeader.vue'

const router = useRouter()
const userStore = useUserStore()

// 站点配置
const siteName = ref('考拉e行')
const navItems = ref([
  { path: '/', label: '首页' },
  { path: '/discover', label: '发现' },
  { path: '/plan', label: '行程规划' },
  { path: '/community', label: '社区' }
])

// 处理下拉菜单命令
const handleCommand = (command) => {
  const handlers = {
    user: () => router.push('/user/profile'),
    logout: () => handleLogout()
  }

  handlers[command]?.()
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // 清除用户数据
      userStore.logout()
      // 跳转到登录页
      router.push('/login')
    })
    .catch(() => { })
}

onMounted(() => {
  userStore.info()
})
</script>

<style scoped lang="less">
.app-container {
  min-height: 100vh;
  background: #f5f7fa;
}

.app-main {
  min-height: calc(100vh - 70px);
  padding-top: 70px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
